<template>
  <div class="tab-title-page bill_page">
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="订单号">
          <el-input v-model="searchForm.orderNo" placeholder="请输入订单号" clearable />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="searchForm.orderStatus" placeholder="全部" clearable>
            <el-option v-for="item in selectList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="searchForm.receivingName" placeholder="请输入用户名" clearable />
        </el-form-item>
        <el-form-item label="租期筛选">
          <el-select v-model="searchForm.leaseTerm" placeholder="全部" clearable>
            <el-option v-for="item in 12" :key="item" :label="`第${item}期`" :value="item + ''" />
          </el-select>
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input v-model="searchForm.shopName" placeholder="请输入供应商名称" clearable />
        </el-form-item>
        <el-form-item label="下单日">
          <my-date-picker ref="makeOrderPicker" />
        </el-form-item>
        <el-form-item label="预计扣款日">
          <my-date-picker ref="withholdPicker" />
        </el-form-item>
        <el-form-item label="实际支付日">
          <my-date-picker ref="payPicker" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider class="middle_divider" />
    <div class="child_page">
      <div class="flex align-center table-top-btns">
        <h5 class="flex align-center">
          <svg-icon style="margin-right: 15px" icon-class="list" :size="15" />数据列表
        </h5>
        <el-button v-if="$hasMethod('#export')" size="small" icon="el-icon-upload2" class="export-btn" @click="exportFile">导出</el-button>
      </div>
      <div class="list_wrap">
        <div class="flex list_header">
          <p class="text-center" style="width: 4%">编号</p>
          <p class="text-center" style="width: 4%">期数</p>
          <p class="text-center" style="width: 7%">租期</p>
          <p class="text-center" style="width: 5%">预计扣款日</p>
          <p class="text-center" style="width: 5%">账单金额</p>
          <p class="text-center" style="width: 5%">实际支付日</p>
          <p class="text-center" style="width: 4%">支付方式</p>
          <p class="text-center" style="width: 5%">实付金额</p>
          <p class="text-center" style="width: 5%">结算租金</p>
          <p class="text-center" style="width: 5%">结算时间</p>
          <p class="text-center" style="width: 4%">结算状态</p>
          <p class="text-center" style="width: 5%">原因</p>
          <p class="text-center" style="width: 3%">扣款次数</p>
          <p class="text-center" style="width: 6%">支付状态</p>
          <p class="text-center" style="width: 4%">逾期天数</p>
          <p class="text-center" style="width: 11%">用户信息</p>
          <p class="text-center" style="width: 6%">商品名称</p>
          <p class="text-center" style="width: 4%">自动扣款功能</p>
          <p class="text-center" style="width: 8%">操作</p>
        </div>
        <div v-for="item in tableData" :key="item.id" class="list_item">
          <div class="flex justify-between align-center item_header">
            <el-tag :type="getOrderStatusType(item.status)">{{ item.statusName }}</el-tag>
            <p>下单日：{{ item.create_time }}</p>
            <p>
              下单信息：<span class="blue-font pointer" @click="goToOrder(item.trade_no)">{{ item.trade_no }}（{{ item.source }}）</span>
            </p>
            <p>
              实名认证：{{ item.real_auth.cert_name }}-{{ item.real_auth.cert_no }}
            </p>
            <p>供应商：{{ item.shopname }}</p>
          </div>
          <div v-for="(lease, index) in item.lease" :key="lease.id" class="flex item_row" :class="{ one_row: item.lease.length === 1 }">
            <div style="width: 4%">{{ lease.id }}</div>
            <div style="width: 4%"> {{ lease.which_period }}/{{ item.lease.length }} </div>
            <div style="width: 7%"> {{ lease.begin_time }}至{{ lease.end_time }} </div>
            <div style="width: 5%">{{ lease.begin_time }}</div>
            <div style="width: 5%">{{ lease.rent }}</div>
            <div style="width: 5%">{{ lease.pay_time }}</div>
            <div style="width: 4%">
              <p v-if="lease.status != 0">
                {{ lease.pay_type == 1 ? "智能合同代扣" : lease.pay_type == 2 ? "预授权代扣" : lease.pay_type == 3 ? "花呗分期" : "主动支付" }}
              </p>
            </div>
            <div style="width: 5%">
              <p v-if="lease.status != 0">{{ lease.paid_rent }}</p>
            </div>
            <div style="width: 5%">
              <p v-if="lease.status != 0">{{ lease.settle_amount }}</p>
            </div>
            <div style="width: 5%">{{ lease.settle_time }}</div>
            <div style="width: 4%">
              {{ lease.settle_type == 1 ? "已结算" : lease.settle_type == 2 ? "拒绝结算" : lease.settle_type == 3 ? "已退款结算" : "未结算" }}
            </div>
            <div style="width: 5%">{{ lease.reason }}</div>
            <div style="width: 3%">
              <p v-if="lease.status != 0">{{ lease.withhold_num }}</p>
            </div>
            <div style="width: 6%">
              <el-tag :type="lease.status == 0 || lease.status == 4 ? '' : 'success'" class="pointer" @click="editStatus(item, lease)">
                {{ lease.status == 1 ? "已支付" : lease.status == 2 ? "已退款" : lease.status == 3 ? "已买断" : lease.status == 4 ? "已逾期" : lease.status == 5 ? "线下支付" : "未支付" }}
              </el-tag>
            </div>
            <div style="width: 4%">{{ lease.overdue_days }}</div>
            <div style="width: 11%" :class="{ no_border_top: index > 0 }">
              <div v-if="index == 0" class="full_column" style="width: calc(11% - 20px)">
                <el-popover v-if="`${item.prov}-${item.city}-${item.area}${item.address}`.length > 30" placement="top-start" width="200" trigger="hover">
                  <p>
                    {{ item.realname }} {{ item.mobile }}<br>{{ item.prov }}-{{ item.city }}-{{ item.area }}{{ item.address }}
                  </p>
                  <p slot="reference">
                    {{ item.realname }} {{ item.mobile }}<br>{{ item.prov }}-{{ item.city }}-{{ item.area }}{{ item.address }}
                  </p>
                </el-popover>
                <p v-else>
                  {{ item.realname }} {{ item.mobile }}<br>{{ item.prov }}-{{ item.city }}-{{ item.area }}{{ item.address }}
                </p>
              </div>
            </div>
            <div style="width: 6%" :class="{ no_border_top: index > 0 }">
              <div v-if="index == 0" class="full_column" style="width: calc(6% - 20px)">
                <el-popover v-if="item.goods_title.length > 30" placement="top-start" width="200" trigger="hover">
                  <p>{{ item.goods_title }}</p>
                  <p slot="reference">{{ item.goods_title }}</p>
                </el-popover>
                <p v-else>{{ item.goods_title }}</p>
              </div>
            </div>
            <div style="width: 4%">
              <el-switch v-model="lease.withhold_status" active-color="#2993FF" inactive-color="#666666" :active-value="1" :inactive-value="2" @change="autoChange(item.order_id, lease.id, lease.withhold_status)" />
            </div>
            <div style="width: 8%" class="flex-column">
              <el-button size="mini" type="primary" @click="viewLog(item, lease.id)">查看记录</el-button>
              <el-button v-if="lease.is_withhold == 1 && $hasMethod('#withhold') && lease.pay_type != 1" style="margin-left: 0; margin-top: 10px" size="mini" type="warning" @click="withholdItem(item.order_id, lease.id)">发起代扣</el-button>
            </div>
          </div>
        </div>
        <custom-page ref="customPage" :total="total" @getList="getList" />
      </div>
    </div>
    <deduct-log ref="deductLog" :order-no="selectedItem.trade_no" :order-id="selectedItem.order_id" :lease-id="selectedItem.leaseId" />
    <edit-billstatus ref="editStatusLog" :order-id="selectedItem.order_id" :lease-id="selectedItem.leaseId" :pay-data="payData" />
  </div>
</template>
<script>
import globalData from '../../utils/global'
import customPage from '@/components/customPage'
import myDatePicker from '@/components/myDatePicker'
import {
  getOrderStatus,
  financeOrderList,
  orderListExport,
  manualWithholding,
  withholdSwitch,
  getOfflinePayData
} from '@/api/finance'
import deductLog from './deductLog'
import editBillstatus from './editBillstatus'
export default {
  components: { customPage, myDatePicker, deductLog, editBillstatus },
  data() {
    return {
      searchForm: {
        orderNo: '',
        orderStatus: '',
        goodsName: '',
        receivingName: '',
        leaseTerm: '',
        orderCreateTime: '',
        leaseTime: '',
        orderPayTime: '',
        shopName: ''
      },
      statusList: globalData.orderStatus,
      selectList: [],
      tableData: [],
      total: 0,
      selectedItem: {},
      payData: {}
    }
  },
  mounted() {
    this.getSelect()
    this.getList()
  },
  methods: {
    editStatus(item, leaseItem) {
      if (leaseItem.status === 0) {
        getOfflinePayData(item.order_id, leaseItem.id).then((res) => {
          this.selectedItem = { ...item }
          this.selectedItem.leaseId = leaseItem.id
          this.payData = { ...res }
          this.$refs.editStatusLog.dialogStatus = true
        }).catch(err => {
          console.log(err)
        })
      }
    },
    autoChange(orderId, leaseId, withholdStatus) {
      withholdSwitch({
        orderId,
        leaseId,
        withholdStatus
      }).then((res) => {
        this.getList(true)
      })
    },
    viewLog(item, leaseId) {
      this.selectedItem = { ...item }
      this.selectedItem.leaseId = leaseId
      this.$refs.deductLog.dialogVisible = true
    },
    // 发起代扣
    withholdItem(orderId, leaseId) {
      this.$confirm('您确定要发起代扣吗？', '发起代扣', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          manualWithholding({ orderId, leaseId }).then((res) => {
            setTimeout(() => {
              this.getList(true)
            }, 1000)
          })
        })
        .catch(() => { })
    },
    goToOrder(orderId) {
      if (orderId) {
        this.$router.push({ name: 'orderList', params: { orderId }})
      }
    },
    getOrderStatusName(status) {
      const obj = this.statusList.find((item) => item.id === status)
      return obj ? obj.name : ''
    },
    getOrderStatusType(status) {
      const obj = this.statusList.find((item) => item.id === status)
      return obj ? obj.type : 'warning'
    },
    // 获取数据
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      financeOrderList({
        page,
        pageSize,
        ...this.searchForm
      }).then((res) => {
        this.tableData = res.data || []
        this.total = res.total || 0
      })
    },
    // 查询
    search() {
      const pickerVal1 = this.$refs.makeOrderPicker.getVal()
      const pickerVal2 = this.$refs.withholdPicker.getVal()
      const pickerVal3 = this.$refs.payPicker.getVal()
      if (pickerVal1 === 'error' || pickerVal2 === 'error' || pickerVal3 === 'error') {
        return
      }
      this.searchForm.orderCreateTime = pickerVal1
      this.searchForm.leaseTime = pickerVal2
      this.searchForm.orderPayTime = pickerVal3
      this.$refs.customPage.page = 1
      this.getList()
    },
    // 重置
    reset() {
      if (this.$refs.makeOrderPicker) {
        this.$refs.makeOrderPicker.reset()
      }
      if (this.$refs.withholdPicker) {
        this.$refs.withholdPicker.reset()
      }
      if (this.$refs.payPicker) {
        this.$refs.payPicker.reset()
      }
      this.searchForm = {
        orderNo: '',
        orderStatus: '',
        goodsName: '',
        receivingName: '',
        leaseTerm: '',
        orderCreateTime: '',
        leaseTime: '',
        orderPayTime: '',
        shopName: ''
      }
      this.getList()
    },
    getSelect() {
      getOrderStatus().then((res) => {
        const list = []
        for (const key in res) {
          list.push({
            id: key,
            name: res[key]
          })
        }
        this.selectList = list || []
      })
    },
    exportFile() {
      orderListExport(this.searchForm)
    }
  }
}
</script>
<style lang="scss" scoped>
.common_form_search {
  padding: 15px 15px 0 15px;
  background-color: #ffffff;
  border-radius: 0 0 10px 10px;
}

.child_page {
  padding: 15px;
}

.list_wrap {
  position: relative;
}

.list_header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  min-height: 50px;
  z-index: 2;
  background: #f5f5f5;
  border: 1px solid #e6e6e6;

  p {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }

  p:not(:first-child) {
    border-left: 1px solid #e6e6e6;
  }
}

.list_item {
  position: relative;
  border: 1px solid #e6e6e6;
  margin-top: 10px;
}

.item_header {
  padding: 5px 10px;
  background-color: #f5f5f5;

  &>p {
    color: #666666;
    font-size: 12px;
    padding-left: 20px;
  }
}

.item_row {
  &>div {
    border-top: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 5px;
    font-size: 14px;
    line-height: 20px;
    word-break: break-word;
    color: #666666;

    &:not(:first-child) {
      border-left: 1px solid #e6e6e6;
    }

    &.no_border_top {
      border-top: none;
    }
  }

  &.one_row {
    min-height: 130px;
  }
}

.full_column {
  position: absolute;
  top: 0;
  bottom: 10px;
  top: 50px;
  display: flex;
  align-items: center;

  p {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
  }
}
</style>
